<template>
  <!-- 三级分类全局组件 -->
  <Category :scene="scene" />
  <el-card style="margin: 10px 0">
    <div v-show="scene == 0">
      <el-button
        @click="addSpu"
        type="primary"
        size="default"
        icon="Plus"
        :disabled="categoryStore.c3Id ? false : true"
        >添加SPU</el-button
      >
      <el-table :data="records">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="SPU操作">
          <template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              title="添加SKU"
              @click="addSku(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              title="修改SPU"
              @click="updateSpu(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="View"
              title="查看SKU列表"
              @click="findSku(row)"
            ></el-button>
            <el-popconfirm
              :title="`你确定删除${row.spuName}?`"
              width="200px"
              @confirm="deleteSpu(row.id)"
            >
              <template #reference>
                <el-button
                  type="primary"
                  size="small"
                  icon="Delete"
                  title="删除SPU"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 12px"
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 9]"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper,->,sizes,total"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <spuForm v-show="scene == 1" ref="spu" @changeScene="changeScene"></spuForm>
    <skuForm v-show="scene == 2" ref="sku" @changeScene="changeScene"></skuForm>
    <!-- dialog对话框:展示已有的SKU数据 -->
    <el-dialog v-model="show" title="SKU列表">
      <el-table border :data="skuArr">
        <el-table-column label="SKU名字" prop="skuName"></el-table-column>
        <el-table-column label="SKU价格" prop="price"></el-table-column>
        <el-table-column label="SKU重量" prop="weight"></el-table-column>
        <el-table-column label="SKU图片">
          <template #="{ row, $index }">
            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import skuForm from "./components/skuForm.vue";
import spuForm from "./components/spuForm.vue";
import { ElMessage } from "element-plus";
import {
  SpuResponseData,
  Records,
  SpuData,
  SkuInfoData,
  SkuData,
} from "@/api/spu/type";
import { reqList, reqRemoveSpu, reqSkuList } from "@/api/spu";
import useCategoryStore from "@/store/modules/category";
const categoryStore = useCategoryStore();

const scene = ref<number>(0);
const page = ref<number>(1);
const pageSize = ref<number>(3);
const total = ref<number>(0);
let records = ref<Records>([]);
//获取子组件实例SpuForm
let spu = ref<any>();
//获取子组件实例SkuForm
let sku = ref<any>();
//存储全部的SKU数据
let skuArr = ref<SkuData[]>([]);
let show = ref<boolean>(false);
const handleSizeChange = (e: number) => {
  pageSize.value = e;
  getSpuList();
};
const handleCurrentChange = (e: number) => {
  page.value = e;
  getSpuList();
};
const getSpuList = async () => {
  const result: SpuResponseData = await reqList(
    page.value,
    pageSize.value,
    categoryStore.c3Id
  );
  if (result.code == 200) {
    total.value = result.data.total;
    records.value = result.data.records;
  }
};
watch(
  () => categoryStore.c3Id,
  (newV, oldV) => {
    records.value = [];
    if (!categoryStore.c3Id) return;
    getSpuList();
  },
  { immediate: true }
);

// 添加spu
const addSpu = () => {
  scene.value = 1;
  spu.value.initAddSpu(categoryStore.c3Id);
};
// 添加sku

const addSku = (spurow: SpuData) => {
  scene.value = 2;
  sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, spurow);
};
const updateSpu = (row: any) => {
  scene.value = 1;
  spu.value.initHasSpuData(row);
};

//查看SKU列表的数据
const findSku = async (row: SpuData) => {
  let result: SkuInfoData = await reqSkuList(row.id as number);
  if (result.code == 200) {
    skuArr.value = result.data;
    //对话框显示出来
    show.value = true;
  }
};
const deleteSpu = async (spuId: number | string) => {
  let result: any = await reqRemoveSpu(spuId);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    //获取剩余SPU数据
    getSpuList();
  } else {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};

const changeScene = (params: any) => {
  scene.value = params.flag;
  getSpuList();
};
</script>

<style scoped lang="scss"></style>
